<template>
  <div style="height: calc(100vh - 150px);">
    <el-row>
        <div class="head-container">
          <el-input
            v-model="orgName"
            placeholder="请输入名称"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          >
            <el-button  slot="append" icon="el-icon-refresh" @click="refresh" circle></el-button>
          </el-input>
        </div>
        <div class="head-container tree-container">
          <el-tree
            :load="loadNode"
            :lazy="lazy"
            :show-checkbox="showCheckbox"
            class="tree filter-tree"
            :data="orgOptions"
            :props="defaultProps"
            :filter-node-method="filterNode"
            ref="tree"
            :indent="0"
            @node-click="handleNodeClick"
            node-key="id"
            :highlight-current="true"
            :default-expanded-keys="defaultShowNodes"
          >
            <span class="custom-tree-node" slot-scope="{node,data}">
              <span>
                 <svg-icon v-if="showIcon || data.showIcon" icon-class="baoxiuxiangmu" />
                {{ node.label }}
              </span>
            </span>
          </el-tree>
        </div>
    </el-row>
  </div>
</template>

<script>

import { treeselect } from "@/api/workorder/repairProject";

export default {
  name: "OrgTree",
  data() {
    return {
      //名称
      orgName:'',
      //组织集合
      orgOptions:[],
      defaultProps: {
        children: "children",
        label: "label",
        isLeaf: 'leaf'
      },
      defaultShowNodes:[],
      currentNode:null
    };
  },
  watch: {
    // 根据名称筛选部门树
    orgName(val) {
      this.$refs.tree.filter(val);
    },
    orgOptions: {
      handler () {
        this.defaultShowNodes = []
        this.currentNode = null
        // 我这里默认展开一级, 指定几级就往里遍历几层取到 id 就可以了
        let children = this.orgOptions.children && this.orgOptions.children.length > 0 ? this.orgOptions.children : this.orgOptions
        this.setDefaultShowNodes(children,this.showNodeLevel)
        this.$nextTick(() => {
          if(children.length > 0){
            this.currentNode = children[0]
            this.$refs.tree.setCurrentKey(this.currentNode.id);
            this.$emit("firstNodeClick",this.currentNode);
          }
        })
      },
      deep: true
    }
  },
  created() {
    this.getTreeselect()
  },
  methods: {
    loadNode(node, resolve) {
      if(node.data.children && node.data.children.length > 0){
        let children = node.data.children;
        for(let i in children){
          if(!children[i].children || children[i].children.length < 1){
            children[i]['leaf'] = true;
          }
        }
        resolve(children);
      }else{
        resolve([]);
      }
    },
    setDefaultShowNodes(children,index){
      children.forEach(item => {
        this.defaultShowNodes.push(item.id)
        if(null != item.children && item.children.length > 0){
          this.setDefaultShowNodes(item.children,index);
        }
      })
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      //这个是视图的数据
      treeselect({}).then(response => {
        this.orgOptions = response.data
      });
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.$emit("nodeClick",data);
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    //排序
    compareKey (propName) {
      return function (a, b) {
        var val1 = a[propName];
        var val2 = b[propName];
        return val1 - val2;
      }
    },
    refresh(){
      this.getTreeselect()
    },
  },
  props: {
    'showNodeLevel': {
      type: Number,
      default:2
    },
    'modelType': {
      type: String,
      default:'dept'
    },
    'showIcon':{
      type:Boolean,
      default:true
    },
    'showCheckbox':{
      type:Boolean,
      default:false
    },
    'lazy':{
      type:Boolean,
      default:false
    },
  }
};
</script>
<style scoped>
  ::-webkit-scrollbar-track-piece {
    background-color: #fff;
    -webkit-border-radius: 0
  }
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px
  }
  ::-webkit-scrollbar-thumb {
    height: 50px;
    background-color: #b8b8b8;
    -webkit-border-radius: 6px;
    outline: 2px solid #fff;
    outline-offset: -2px;
    border: 2px solid #fff;
    filter: alpha(opacity = 50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5
  }
  ::-webkit-scrollbar-thumb:hover {
    height: 50px;
    background-color: #878987;
    -webkit-border-radius: 6px
  }


.tree-container{
  overflow: hidden;
}
/* 树形结构节点添加连线 */
.tree {
  overflow-x: auto;
  overflow-y: auto;
  height: calc(100vh - 215px);
}
.tree /deep/ .el-tree-node {
  position: relative;
  padding-left: 2px;
}
.tree /deep/ .el-tree-node__children {
  padding-left: 16px;
}

.tree /deep/ .el-tree-node :last-child:before {
  height: 25px;
}

.tree /deep/ .el-tree > .el-tree-node:before {
  border-left: none;
}

.tree-container /deep/ .el-tree > .el-tree-node:after {
  border-top: none;
}

.tree /deep/ .el-tree-node:before {
  content: "";
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
}

.tree /deep/ .el-tree-node:after {
  content: "";
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
}
.tree /deep/ .el-tree-node__expand-icon.is-leaf {
  display: none;
}

.tree /deep/ .el-tree-node:before {
  border-left: 1px dashed #b8b9bb;
  bottom: 0px;
  height: 100%;
  top: -13px;
  width: 1px;
}

.tree /deep/ .el-tree-node:after {
  border-top: 1px dashed #b8b9bb;
  height: 20px;
  top: 12px;
  width: 16px;
}
.custom-tree-node{
  font-size: 12px;
  font-weight: normal;
}
/* .tree /deep/  .el-tree-node > .el-tree-node__children{
  overflow-x: auto;
} */
.tree /deep/  .el-tree-node > .el-tree-node__children{
  overflow: inherit;
}
.tree  /deep/ .is-leaf + .custom-tree-node{
  padding-left: 10px !important;
}
</style>
